<template>
  <div class="player" v-if="songList.length">
    <!-- 音乐播放 -->
    <div class="music-player">
      <audio
        @timeupdate="updateTime"
        @canplay="canplay"
        @ended="ended"
        ref="audio"
        :src="currSong.url"
      ></audio>
    </div>
    <!-- 大 -->
    <div class="big-screen" v-if="fullScreen">
      <div class="top">
        <van-icon
          class="beSmall"
          name="arrow-down"
          @click="changeFullScreen(false)"
        />
        <h1 class="title">{{ currSong.name }}</h1>
        <h2 class="singer">{{ currSong.singer }}</h2>
      </div>
      <div class="middle">
        <!-- cd转动 -->
        <div :class="paused ? 'cdimg cd-play cd-pause' : 'cdimg cd-play'">
          <img :src="currSong.pic" alt="" />
        </div>
        <!-- 歌词列表 -->
        <myLtric :paused="paused" ref="lyric"></myLtric>
      </div>
      <div class="bottom">
        <!-- 进度条 -->
        <myProgress @jump="jump" :currentTime="currentTime"></myProgress>
        <!-- 按钮 -->
        <div class="buttons">
          <button @click="changeLoop">{{ loopMode[loop] }}</button>
          <button @click="prevSong">上一首</button>
          <button @click="play">{{ this.paused ? "播放" : "暂停" }}</button>
          <button @click="nextSong">下一首</button>
          <button @click="changeLikes">
            {{ isLike ? "喜欢呢" : "一般吧" }}
          </button>
        </div>
      </div>
    </div>
    <!-- 小 -->
    <div class="small-screen" v-else>
      <div class="cdimg" @click="changeFullScreen(true)">
        <div :class="paused ? 'cd cd-play cd-pause' : 'cd cd-play'">
          <img :src="currSong.pic" alt="" />
        </div>
      </div>
      <div class="sing-info" @click="changeFullScreen(true)">
        <h1 class="title">{{ currSong.name }}</h1>
        <h2 class="singer">{{ currSong.singer }}</h2>
      </div>
      <div class="buttons">
        <button @click="play">{{ this.paused ? "播放" : "暂停" }}</button>
        <button @click="nextSong">Next</button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations } from "vuex";
import myProgress from "./components/progress.vue";
import myLtric from "./components/lyric.vue";
export default {
  data() {
    return {
      loopMode: ["单曲循环", "列表循环", "随机循环"],
      loop: 1,
      paused: true, // 在变量中记录播放状态 和 audio标签的播放状态保持同步
      currentTime: 0,
    };
  },
  components: { myProgress, myLtric },
  computed: {
    ...mapState(["songList", "fullScreen", "currIndex"]),
    ...mapGetters(["currSong", "isLike"]),
  },
  methods: {
    ...mapMutations(["changeFullScreen", "changeCurrIndex", "changeLikes"]),
    jump(num) {
      this.$refs.audio.currentTime = num;
      this.$refs.lyric.seek(num);
    },
    changeLoop() {
      this.loop++;
      if (this.loop > 2) {
        this.loop = 0;
      }
    },
    updateTime(e) {
      this.currentTime = e.target.currentTime;
    },
    play() {
      if (!this.$refs.audio) return false;
      if (this.paused) {
        this.$refs.audio.play();
        this.paused = false;
      } else {
        this.$refs.audio.pause();
        this.paused = true;
      }
    },
    prevSong() {
      let index = this.currIndex - 1;
      if (index < 0) {
        index = this.songList.length - 1;
      }
      this.changeCurrIndex(index);
    },
    nextSong() {
      if (this.loop == 2) {
        const max = this.songList.length;
        const randIdx = parseInt(max * Math.random());
        this.changeCurrIndex(randIdx);
      } else {
        let index = this.currIndex + 1;
        if (index >= this.songList.length) {
          index = 0;
        }
        this.changeCurrIndex(index);
      }
    },
    canplay() {
      this.paused = true;
      console.log(this.paused);
      if (this.paused) {
        this.play();
      }
    },
    ended() {
      this.paused = true;
      if (this.loop == 0) {
        this.play();
      } else {
        this.nextSong();
      }
    },
  },
  // created() {
  //   this.$refs.audio.play();
  // },
};
</script>

<style lang="less" scoped>
@import "@styles/index.less";
.player {
  .big-screen {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: black;
    z-index: 5;
    .top {
      .wh(375,60);
      .margin(0,0,25,0);
      .beSmall {
        position: absolute;
        .fs(28);
        color: @c;
        .top(8);
        .left(8);
      }
      .title {
        .wh(374,40);
        .fs(18);
        text-align: center;
        color: #fff;
        .lh(40);
      }
      .singer {
        .wh(375,20);
        text-align: center;
        .fs(14);
        color: #fff;
        .lh(20);
      }
    }
    .middle {
      .wh(375,417);
      .cdimg {
        .wh(300,300);
        margin: 0 auto;
        overflow: hidden;
        box-sizing: border-box;
        border-radius: 50%;
        border: 10px solid hsla(0, 0%, 100%, 0.1);
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .bottom {
      .buttons {
        .wh(375,40);
        display: flex;
        button {
          .fs(14);
          .wh(75,40 );
          outline: 0;
          background: #000000;
          color: @c;
          flex: 1;
        }
      }
    }
  }
  .small-screen {
    position: fixed;
    .h(60);
    bottom: 0;
    right: 0;
    left: 0;
    background: @bg3;
    z-index: 4;
    .cdimg {
      .wh(70,40);
      display: flex;
      align-items: center;
      position: fixed;
      left: 0;
      bottom: 0;
      .padding(10,10,10,20);
      .cd {
        border-radius: 50%;
        overflow: hidden;
        img {
          .wh(40,40);
        }
      }
    }
    .sing-info {
      .wh(205,42);
      .padding(8,0,0,0);
      position: fixed;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      .left(70);
      .title {
        color: white;
        .fs(16);
      }
      .singer {
        color: gray;
        .margin(5,0,0,0);
      }
    }
    .buttons {
      position: fixed;
      right: 0;
      bottom: 0;
      .wh(100,60);
      display: flex;
      align-items: center;
      button {
        .wh(40,40);
        .fs(12);
        border-radius: 50%;
        color: @c;
        outline: 0;
        border: 3px @c solid;
        background: @bg3;
        .margin(0,10,0,0);
      }
    }
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.cd-play {
  animation: rotate 10s infinite linear;
}
.cd-pause {
  animation-play-state: paused;
}
</style>
